<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">
    </script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">
    </script>
</head>
<body>

<div id="app">
<h1>{{message}}</h1>
    <div>
        <div id="noticeListContainer"><!--内容列表区-->
            <form id="queryForm" style="display: inline">
                <input type="text" name="title" placeholder="请输入标题">
                <input type="button" class="btn btn-primary btn-sm" value="查询" @click="doQueryNotices">
            </form>
            <button @click="doDisplay()" id="display" class="btn btn-primary btn-sm">添加</button>

            <button @click="doGetNotices" class="btn btn-primary btn-sm">返回主菜单</button>
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="(n,i) in notices" :key="i">
                        <td>{{i+1}}</td>
                        <td>{{n.title}}</td>
                        <td>{{n.type}}</td>
                        <td>{{n.status}}</td>
                        <td>{{n.createdTime}}</td>
                        <td>
                            <button class="btn btn-primary btn-sm" @click="doDeleteById(n.id)">删除</button>
                            <button class="btn btn-primary btn-sm"  @click="doFindById(n.id)">更新</button>

                        </td>
                    </tr>
                </tbody>
            </table>
            <!--分页DIV-->
            <div class="pagination">
                <button class="pre" @click="doJumpToPage">上一页</button>
                <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
                <button class="next" @click="doJumpToPage">下一页</button>
                <form id="pageForm" style="display: inline">
                    <input type="text" name="pageCurrent" id="pageNumId">
                    <input type="button"  value="跳转" class="jump" @click="doJumpToPage">
                </form>
            </div>
        </div>

        <!-- 添加页面 -->
        <div id="noticeEditContainer" style="display: none">
            <form id="noticeEditForm">
                <input type="hidden" id="id">
                <div class="form-group">
                    <label for="typeId" >类型:</label>
                    <select class="form-control" v-model="type" id="typeId">
                        <option value="1">通知</option>
                        <option value="2">公告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="tId">标题:</label>
                    <input type="text" v-model="title" class="form-control" id="tId" placeholder="title">
                </div>
                <div class="form-group">
                    <label for="contentId">内容:</label>
                    <textarea v-model="content" class="form-control" rows="3" id="contentId">
                   </textarea>
                </div>
                <div class="form-group">
                    <label>状态:</label>
                    <label class="radio-inline">
                        <input v-model="status" type="radio" name="status" value="0" checked> 正常
                    </label>
                    <label class="radio-inline">
                        <input v-model="status" type="radio" name="status" value="1"> 关闭
                    </label>
                </div>
                <button type="button" class="btn btn-primary submit" @click="doSaveOrUpdate()">Submit</button>
                <button type="button" class="btn btn-primary cancel">Cancel</button>
            </form>
        </div>

    </div>
</div>



</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",

        data:{
            message:"通告管理客户端实现(Bootstrap/vue.js/axios)",
            notices:[],
            id:"",
            title:"",
            status:0,
            content:"",
            type:1,
            pageCurrent:1,
            pageCount:1,
        },
        methods:{

            doFindById(id){
            //@click="doDisplay()"
                let url = `http://localhost:8090/notice/${id}`;
                axios.get(url).then((response)=>{
                    let result = response.data;
                    console.log(result.data.title);
                    if (result.state==1){
                        this.id = result.data.id;
                        this.title = result.data.title;
                        this.type = result.data.type;
                        this.status = result.data.status;
                        this.content = result.data.content;
                        this.doDisplay();
                    }else{
                        alert(result.message);
                    }
                })
            },

            doSaveOrUpdate(id){
                // url
                let url = "http://localhost:8090/notice/";

                let params={"id":this.id,"title":this.title,"type":this.type,"content":this.content,"status":this.status};
                axios(
                    {method:this.id?"put":"post",
                    url:url,
                    data:params}).then((response)=>{
                    let result = response.data;
                    if (result.state==1){
                        alert(result.message);
                        this.doGetNotices();
                        this.resetForm();
                    }else{
                        alert(result.message);
                    }

                })
                //this.doGetNotices();
            },

            resetForm(){
                this.type=1;
                this.title='';
                this.content='';
                this.status=0;
            },

            doDisplay(event){
                //event.target.getAttribute("class");
                //document.getElementById("#display");
                let dis = document.querySelector("#noticeEditContainer").style.display="block";

            },

            doDeleteById(id){
                let url = `http://localhost:8090/notice/${id}`;
                axios.delete(url).then((response)=>{
                    let result = response.data;
                    if (result.state==1){

                        alert(result.message);
                        let rows = document.querySelector("table>tbody>tr").children.length;
                        // 判断是否为最后一页只有最后一条数据
                        if (this.pageCurrent>1&&this.pageCurrent==this.pageCount&&rows==1){
                            this.pageCurrent--;
                        }
                        this.doGetNotices();
                    }else{
                        alert(result.message);
                    }
                })
            },

            doQueryNotices(){
                this.doGetNotices();
                this.pageCurrent=1;
                let queryForm = document.querySelector("#queryForm");
                let title = queryForm.elements[0].value;
                if (title==null || title=='' || title==NaN){
                    alert("没有对应的记录！")
                }else{
                    this.doGetNotices();
                    //this.title='';
                    document.querySelector("#queryForm").elements[0].value='';
                }


            },
            // 跳转 event 是获取当前事件的对象
            doJumpToPage(event){
                let cls = event.target.getAttribute("class");
                if (cls=="pre" && this.pageCurrent>1){
                    this.pageCurrent--;
                }else if (cls=="next"&&this.pageCurrent<this.pageCount){
                    this.pageCurrent++;
                }else if (cls=="jump"){
                    let input = document.querySelector("#pageNumId");
                    let pageNum = input.value;

                    if (pageNum<1 || pageNum>this.pageCount){

                        alert("页码值不正确！")
                        return;
                    }
                    this.pageCurrent= pageNum;
                    this.doGetNotices();
                }else{
                    return;
                }
                this.doGetNotices();
                //console.log(cls);
            },

            doGetNotices(){
                let queryForm = document.querySelector("#queryForm");
                let title = queryForm.elements[0].value;

                let url=`http://localhost:8090/notice/?pageCurrent=${this.pageCurrent}&title=${title}`;
                axios.get(url)
                    .then(function (response) {
                        // handle success
                        let jsonResult = response.data;
                        this.vm.notices = jsonResult.data.list;
                        //console.log(jsonResult);

                        // 设置分页初始数据
                        this.vm.pageCurrent = jsonResult.data.pageNum;
                        this.vm.pageCount = jsonResult.data.pages;
                    })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    })
            }

        },
        mounted(){
            //console.log("211")
            this.doGetNotices();
        }

    })
</script>
</html>